<template>
  <div :class="[`nav-theme-${navTheme}`,`nav-layout-${navLayout}`]">
    <!-- https://www.antdv.com/components/layout-cn/ 的侧边布局模板开始 -->
    <a-layout  style="min-height: 100vh">
      <a-layout-sider 
      v-if="navLayout === 'left'"
      :theme="navTheme" 
      :trigger="null" v-model="collapsed" collapsible
      width="256px"
      ><!-- //左侧菜单栏缩放，trigger设置null隐藏 -->
        <div class="logo" >Ant Design Vue Pro logo</div>
        <SiderMenu :theme="navTheme"></SiderMenu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0" >
            <a-icon v-auth="['admin']" 
            class="trigger"  @click="collapsed = !collapsed"
            :type="collapsed? 'menu-unfold' : 'menu-fold'" ></a-icon>
            <Header></Header>
        </a-layout-header>
        <a-layout-content style="margin: 0 16px">
         <router-view></router-view>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
          <Footer></Footer>
        </a-layout-footer>
      </a-layout>
    </a-layout>
    <!-- 侧边布局模板开始结束 -->
    <Authorized :authority="['admin']">
      <SettingDrawer></SettingDrawer>
    </Authorized>
  </div>
</template>

<script>
import Header from "./Header.vue";
import Footer from "./Footer.vue";
import SiderMenu from "./SiderMenu.vue";
import SettingDrawer from '../components/SettingDrawe'

export default {
  data() {
    return {
      collapsed: false,  //为了左侧菜单收缩
    };
  },
  computed: {
    navTheme() {
      return this.$route.query.navTheme || "dark";
    },
    navLayout() {
      return this.$route.query.navLayout || "left";
    }
  },
  components: {
    Header,
    Footer,
    SiderMenu,
    SettingDrawer
  },
};
</script>

<style scoped>

.trigger{
  padding: 0 20px;
  line-height: 60px;
  font-size: 20px;
}
.trigger:hover{
  background: #eee;
}

.logo{
  height: 64px;
  line-height: 64px;
  text-align: center;
  overflow: hidden;
}
.nav-theme-dark >>> .logo{
  color: #fff;
}
</style>